<template>
	<view class="paydata">
		<view class="paydata_search">
			<searchCom @searchClick="searchFun"></searchCom>
		</view>
		<scroll-view class="list" scroll-y="true"
				 @scrolltolower="getYsfimglist">
			<view class="list_eve" v-for="(item,index) in paylist" @click="navDetail(item.id,1)">
				<view class="list_title">
					<view class="title_t">
						<text class="list_title_one">{{item.shop_name}}</text>
						<text :class="statusColor[item.status]">{{item.statusText}}</text>
					</view>
					<view class="title_id"><text>商户UID: {{item.uid}}</text><text>门店UID: {{item.id}}</text></view>
				</view>
				<view class="list_con">
					<view class="list_item">
						<view class="item_title">银联商户号</view>
						<view class="item_text">{{item.merchant_id}}</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
	import { ysfimglist } from '../../api/index.js'
	import noData from '../../components/data/nodata.vue'
	import searchCom from '../../components/search/searchCom.vue'
	export default {
		data() {
			return {
				searchVal:'',
				paylist:[],
				isLoad:false,
				isAll:false,
				page:1,
				limit:20,
				statusColor:{
					'0':'orangefont',//未审核
					'1':'bluefont',//审核通过
					'2':'redfont', //审核失败
					'-1':'greenfont' //未申请
				}
			}
		},
		onLoad:function(){
			this.getYsfimglist(true)
		},
		methods: {
			navDetail:function(id,type){
				uni.navigateTo({
					url: '../paydetail/paydetail?id='+id+'&type='+type
				});
			},
			getYsfimglist:function(isSw){
				let that = this;
				if(that.isLoad || that.isAll){ //假如之前的请求未完成或者列表数据已经全部加载完毕，则返回空
					console.log("请求未完成或者列表数据已经全部加载完毕")
					return ;
				}
				that.isLoad = true;
				
				ysfimglist({
					search:that.searchVal,
					page:that.page,
					limit:that.limit
				}).then((res) => {
					if(res.code == 0){
						if(isSw === true){//判断是否重新加载数据
							that.paylist = that.deallist(res.data);
						}else{
							that.paylist = that.paylist.concat(that.deallist(res.data));
						}
						
						that.page += 1;
						that.isLoad = false;
						if(res.data.length < that.limit){
							that.isAll = true;
						}
					}else{
						console.log(res)
						that.isLoad = false;
						that.isAll = false;
					}
				}).catch((e) => {
					console.log(e)
				})
			},
			deallist:function(data){
				let list = data.map((item,index,arr)=>{
					let statusTextObj = {
						'-1':'未申请',
						'0':'未审核',
						'1':'审核通过',
						'2':'审核失败'
					}
					return {
						shop_name:item.shop_name,
						id:item.id, //门店id
						uid:item.uid, //商户id
						merchant_id:item.merchant_id, //银联商户号
						status:item.status, //审核状态:-1未申请,0-未审核,1-审核通过,2-审核失败
						statusText: statusTextObj[item.status]
					};
				});
				return list;
			},
			searchFun:function(data){
				this.searchVal = data.searchComval;
				this.isLoad = false;
				this.isAll = false;
				this.page = 1;
				this.getYsfimglist(true);
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '../bankupload/bankupload?type=1'
			});
		},
		components:{
			searchCom,
			noData,
		}
	}
</script>

<style lang="scss" scoped>
	.paydata{
		height: 100%;
		background-color: #F5F5F5;
		font-size: $uni-font-size-base;
		.paydata_search{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
		}
		.list{
			height: 100%;
			box-sizing: border-box;
			padding: 15% 30rpx 0 30rpx;
			.list_eve{
				background-color: #FFFFFF;
				padding: 0 30rpx;
				border-radius: $uni-border-radius-base;
				margin-bottom: 30rpx;
				.list_title{
					padding: 30rpx 0;
					border-bottom: 1rpx $uni-border-color-e5 solid;
					.title_t{
						display: flex;
						justify-content: space-between;
					}
					.title_id{
						margin-top: 10rpx;
						font-size: $uni-font-size-sm;
						text{
							margin-right: 10rpx;
						}
						.list_title_one{
							font-weight: bold;
						}
					}
					
				}
				.list_con{
					padding: 15rpx 0;
					.list_item{
						display: flex;
						padding: 15rpx 0;
						.item_title{
							margin-right: 30rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
</style>